
<template>
  <!-- @mouseleave="mouseleave(item)"
  @mouseover="mouseover(item)"-->
  <div
    class="listItem"
    :key="item.id"
    @click="selectItems(item)"
  >
    <div
      class="editBtns"
      v-if="item.isEdit||isSelect"
    >
      <div
        class="center"
        v-if="editItem.length<=1"
      >
        <el-button @click="go2edit(item,$event)">编辑</el-button>
      </div>
      <svg-icon
        icon-class="close"
        @click="deleteShelf1(item,$event)"
        class="close_icon"
        v-if="editItem.length<=1"
      ></svg-icon>
    </div>
    <!-- 图片显示 -->
    <div>
      <img
        class="left img"
        :src="item.image"
        alt
      >
    </div>

    <div class="right">
      <h5 style="padding-left:10px;">{{item.name}}</h5>
      <div class="rows">
        <div class="rowItem">
          <div class="item1">货道号:</div>
          <div class="item2">{{item.number}}</div>
        </div>
        <div class="rowItem">
          <div class="item1">零售价:</div>
          <div class="item2">￥{{item.price}}</div>
        </div>
      </div>
      <div
        style="padding-top:10px;"
        class="rows"
      >
        <div class="rowItem">
          <div class="item1">容量:</div>
          <div class="item2">{{item.maxStock}}</div>
        </div>
        <div class="rowItem">
          <div class="item1">安全库存:</div>
          <div class="item2">{{item.safeStock}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import myalert from "../../../utils/alert";
export default {
  props: ["visible", "item", "visiblerpoduct", "editItem", "isSmallType"],
  computed: {
    isSelect() {
      return this.editItem.filter(item1 => item1.number == this.item.number)
        .length;
    }
  },
  methods: {
    deleteShelf1(item, e) {
      e.stopPropagation();
      var self = this;
      myalert.confirm("确定要删除吗？").then(res => {
        self.$emit("deleteItem", item);
      });
    },
    mouseover(item) {
      item.isEdit = true;
    },
    mouseleave(item) {
      item.isEdit = false;
    },
    go2edit(item, e) {
      item.isEdit = false;
      this.$emit("update:visible", true);
      this.$emit("goEdit", item);
      e.stopPropagation();
    },
    selectItems(item) {
      //存在 jia
      //不存在  delete
      var _index = this.editItem.findIndex(
        item1 => item1.number == item.number
      );
      if (_index >= 0) {
        //修改 shelfs item的方法不一样
        if (this.isSmallType) {
          if (this.$parent.detail.shelfs[item.number - 1]) {
            this.$parent.detail.shelfs[item.number - 1].isEdit = false;
          }
        } else {
          this.$parent.detail.shelfs[item.uuid.split(":")[0]].items[
            item.uuid.split(":")[1]
          ].isEdit = false;
        }

        this.editItem.splice(_index, 1);
      } else {
        this.editItem.push(item);
      }
      this.$emit("selectItem", this.editItem);
    }
  }
};
</script>
<style lang="scss" scoped>
.listItem {
  box-sizing: border-box;
  display: inline-block;
  width: calc(50%-20px);
  border: 1px solid #ddd;
  display: flex;
  padding: 10px;
  margin-bottom: 20px;
  position: relative;
  .editBtns {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #f0f9eb7d;
    .center {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
    .close_icon {
      color: #222;
    }
  }
  & .close_icon {
    cursor: pointer;
    right: 10px;
    top: 10px;
    position: absolute;
  }
  .left.img {
    width: 60px;
    height: 60px;
  }
  .right {
    flex: 1;
    h5 {
      padding: 0;
      margin: 0;
      padding-bottom: 5px;
    }
    .rows {
      display: flex;
      .rowItem {
        display: flex;
        .item1 {
          margin-left: 10px;
          //   width: 80px;
        }
        .item2 {
          //   width: 60px;
        }
      }
    }
    .el-input {
      max-width: 80px;
      padding: 0px;
    }
  }
}

// header1
.header1 {
  display: flex;
  align-items: flex-end;
  padding: 10px;

  h2 {
  }

  .el-input-number {
    margin-right: 10px;
    margin-left: 10px;
  }
}
</style>


